<template>
  <GcTable
    ref="instanceTable"
    v-loading="loading"
    v-model:searchKeywords="searchKeywords"
    :columns="RESOURCE_CONFIG_COLUMN"
    :tableData="tableData"
    :showPage="false"
    :showFilter="false"
    stripe
    searchPlaceholder="请输入资源名称进行搜索"
    @search="handlerSearch">
    <template #btn-group>
      <el-button
        v-permission="'resource-config-permission:btn:add'"
        type="primary"
        @click="currentResource = null; resourceVisible = true">新增资源</el-button>
      <el-button :type="isExpandall ? 'danger' : 'success'" @click="handleExpandTable">{{ isExpandall ? '收起所有' : '展开所有' }}</el-button>
    </template>
    <template #type="{ row }">
      <el-tag v-if="row.type === 'menu'" size="large">菜单</el-tag>
      <el-tag v-if="row.type === 'btn'" size="large" type="danger">按钮</el-tag>
    </template>
    <template #operate="{ row }">
      <div class="operate-btn-group center">
        <gc-icon-button
          v-permission="'resource-config-permission:btn:edit'"
          type="link"
          @click="updateResource(row)">编辑</gc-icon-button>
        <gc-icon-button
          v-permission="'resource-config-permission:btn:delete'"
          type="link"
          @click="deleteResource(row.id)">删除</gc-icon-button>
      </div>
    </template>
  </GcTable>
  <OperateResourceModal
    v-if="resourceVisible"
    @close-modal="closeModal"
    :resourceInfo="currentResource" />
</template>

<script setup lang="ts" name="ResourceConfig">
import { ref } from 'vue'
import { RESOURCE_CONFIG_COLUMN } from './const'
import usePagination from '@/hooks/usePagination'
import type { ResourceTree } from '@/http/type'
import { apiGetResourceTreeList, apiDeleteResource } from '@/http/service'
import { ElMessageBox, ElMessage } from 'element-plus'
import OperateResourceModal from './components/OperateResourceModal.vue'

const instanceTable = ref()
const { loading } = usePagination()
const tableData = ref<Array<ResourceTree>>([])
const searchKeywords = ref('')
const resourceVisible = ref(false)
const currentResource = ref<null | ResourceTree>(null)
const isExpandall = ref(false)

/**
 * 资源列表树查询
 */
async function findResourceTreeList () {
  const searchParams = {
    searchKeywords: searchKeywords.value
  }
  loading.value = true
  try {
    const data = await apiGetResourceTreeList<Array<ResourceTree>>(searchParams)
    tableData.value = data
  } catch (error) {
    tableData.value = []
  } finally {
    loading.value = false
  }
}
findResourceTreeList()

/**
 * 资源删除
 * @param id
 */
async function deleteResource (id: number) {
  await ElMessageBox.confirm(
    '删除资源后无法恢复，确认删除？',
    '提示',
    {
      type: 'warning'
    }
  )
  await apiDeleteResource(id)
  ElMessage.success('删除资源成功')
  findResourceTreeList()
}

function handleExpandTable () {
  function recursionExpandTable (data: Array<ResourceTree>) {
    data.forEach(tableItem => {
      instanceTable.value.toggleRowExpansion(tableItem, !isExpandall.value)
      if (tableItem.children?.length) {
        recursionExpandTable(tableItem.children)
      }
    })
  }
  recursionExpandTable(tableData.value)
  isExpandall.value = !isExpandall.value
}

function updateResource (resourceItem: ResourceTree) {
  currentResource.value = resourceItem
  resourceVisible.value = true
}

function handlerSearch () {
  findResourceTreeList()
}

function closeModal (update?: boolean) {
  if (update) {
    findResourceTreeList()
  }
  resourceVisible.value = false
}
</script>

<style lang="scss" scoped></style>
